<template>
<div class="mainContainer">
	<div class="header">
	</div>

	<div class="left-menu">
		<el-menu
      router
      :default-active="currentMenuItem"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      
      <template v-for="(item, index) in menuList">
          <template v-if="item.subs">
              <el-submenu :index="item.index">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{item.title}}</span>
              </template>
              <template v-for="subItem in item.subs">
                <el-menu-item :index="subItem.route">{{subItem.title}}</el-menu-item>
              </template>
            </el-submenu>
          </template>
          <template v-else>
              <el-menu-item  :index="item.route">
                <i class="el-icon-menu"></i>
                <span slot="title">{{item.title}}</span>
              </el-menu-item>
          </template>
      </template>
      
    </el-menu>
	</div>

  <div class="content-tabs">
    <el-tabs v-model="currentActiveIndex" type="card" closable @tab-remove="removeTab" @tab-click="tabClick" >
      <el-tab-pane
        v-for="(item, index) in selectedRouters"
        :key="item.index"
        :label="item.title"
        :name="item.index"
      ></el-tab-pane>
  </el-tabs>
  </div>

	<div class="content" >
		   <router-view></router-view>
	</div>
</div>
</template>



<script type="text/javascript">
import { mapState } from 'vuex'

export default {
    data() {
      return {
      }
    },
    computed: {
      ...mapState([
          'selectedRouters',
          'menuList',
          'menuListMap',
          'currentMenuItem'
        ]),
      currentActiveIndex:{
        get(){
          return this.$store.state.currentActiveIndex
        },
        set(val){
          this.$store.commit('setCurrentActiveIndex', val)
        }
      }
    },
    methods: {
      tabClick(tab){
          this.$router.push({ path: this.selectedRouters[tab.index]['route'] })
      },
      removeTab(index) {
        this.$store.commit('deleteTab', index)
        const len = this.selectedRouters.length
        this.$router.replace(this.selectedRouters[len-1]['route'])
      }
    }
  }

</script>